
<div id="wrapMain">
	<div id="innerMain">
		<div class="row">
        
        
    <div class="pull-left head_text btn btn-danger" >HOME</div>    <div class="btn-group pull-right">


  <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      NGÀY
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
      <li><a href="date/desc">Mới <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="date/asc">Cũ <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
  
  
    <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      VIEW
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
      <li><a href="views/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="views/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
  
    <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      LIKE
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
       <li><a href="like/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="like/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
  
    <div class="btn-group">
    <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
      COMMENT
      <i class="icon-caret-down"></i>
    </button>
    <ul class="dropdown-menu">
       <li><a href="comments/desc">NHIỀU <i class="icon-long-arrow-right"></i> </a></li>
      <li><a href="comments/asc">ÍT <i class="icon-long-arrow-right"></i></a></li>
    </ul>
  </div>
</div>
     <div class="clearfix"></div>
     <div style="height:20px"></div>   
        

<?php
		//POST RENDER GRID VIEW DATA
		post_render_grid($data['info']);
		
		$page = (isset($_GET['page']) && $_GET['page'] != null) ? $_GET['page'] : 1;
		
		$max_page = $data['page'];

?>

		<nav id="page-nav">
			<a href="index.php?module=ajax&act=ajax&case=1&t=load_more_items&page=<?= $page; ?><?php if(isset($_GET['ext'])){ echo "&ext=".$_GET['ext']."&sort=".$_GET['sort']; } ?>"></a>
		</nav>
		
		<div class="loading" id="mainLoading"><div id="loadMoreItems" class="normalLoadBtn"><img width="20" src="public/images/loading.gif" alt="loading" /> Loading </div><div class="clr"></div></div>
		<div id="next-page"></div>



		</div><!-- end .row -->
	</div><!-- end innerMain -->
</div><!-- end wrapMain -->
		
   <script>
   
  $(document).ready(function(){
    var max_page = '<?= $max_page ?>';

    var $container = $('#contentIndex');
    
    $container.imagesLoaded(function(){
    	 
      $container.masonry({
        itemSelector: '.item',
        columnWidth: 250,
      });
    });
    var nextSelector = '#page-nav a';
    var origNextUrl = $(nextSelector).attr('href');

    var pageRegex = /(page=)([0-9]+)/;
    var page  = origNextUrl.match(pageRegex)[2];
    var mypage = page;

    var loadedTime = 0;
    
    $container.infinitescroll({
	    navSelector  : '#page-nav',    // selector for the paged navigation 
	    nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
	    itemSelector : '.item',     // selector for all items you'll retrieve
	        
	    path: function(pageNum) {
		    $('#mainLoading').show();

			if(mypage >= max_page){
				$('#mainLoading').hide();
				$('#next-page').append('<div class="normalLoadBtn">Hết dữ liệu</div>');
				return;
			}
		    
	        if(loadedTime != 1 && ((mypage + 1) % <?= LOAD_TIME ?> == 0) && mypage >= 1 ){
		        $('#mainLoading').hide();
				
	        }
	        
	        mypage++;
	        loadedTime++;
	        
	        return origNextUrl.replace( pageRegex, ("$1" + (mypage)));
        }
    },
      
      
      
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $('.video_play_icon').center();
          $container.masonry( 'appended', $newElems, true ); 
          $('#mainLoading').hide();
          
        });
      }
    );
    
  });
</script>     
<!-- end #wrapMain -->	